<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
      button {
        margin-right: 10px;
      }
    </style>
  </head>
  
  <body>
    <div id="app">
      <!-- 内联事件处理器，类似count++和func()为内联 -->
      <button v-on:click="inlineCount++">InlineCount自增：{{inlineCount}}</button>
      <button @click="addInlineNumber()">InlineNumber自增：{{inlineNumber}}</button>
      
      <!-- 方法事件处理器，类似func、obj.func和obj['func']为方法  -->
      <button @click="addFuncNumber">FuncNumber自增：{{funcNumber}}</button>
      <button @click="funcObj.addNumber">FuncObjNumber自增：{{funcObj.number}}</button>
      
      <!-- 对象语法，动态绑定多个值，不支持任何修饰符 -->
      <button v-on="{click:addObjNumber}">ObjNumber自增：{{objNumber}}</button>
    </div>
  </body>
  
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  
  <script>
    Vue.createApp({
      data() {
        return {
          // 试着修改以下属性值，看看HTML中的变化
          inlineCount: 0,
          inlineNumber: 0,
          funcNumber: 0,
          funcObj: {
            number: 0,
            addNumber: () => {
              this.funcObj.number++;
            }
          },
          objNumber: 0,
        };
      },
      methods: {
        addInlineNumber() {
          this.inlineNumber++;
        },
        addFuncNumber() {
          this.funcNumber++;
        },
        addObjNumber() {
          this.objNumber++;
        }
      }
    }).mount('#app');
  </script>
</html>